<template>
  <div class="sample-tutorial">
    <gc-spread-sheets
      class="sample-spreadsheets"
      @workbookInitialized="initSpread"
    >
      <gc-worksheet />
    </gc-spread-sheets>
  </div>
</template>
<script lang="ts" setup>
import { reactive, toRefs, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'

import GC from '@grapecity/spread-sheets'
const router = useRouter()
const route = useRoute()
const store = useStore()
const source = [
  { Course: 'Calculus', Term: 1, Credit: 5, Score: 80, Teacher: 'Nancy Feehafer' },
  { Course: 'P.E.', Term: 1, Credit: 3.5, Score: 85, Teacher: 'Andrew Cencini' },
  { Course: 'Political Economics', Term: 1, Credit: 3.5, Score: 95, Teacher: 'Jan Kotas' },
  { Course: 'Basic of Computer', Term: 1, Credit: 2, Score: 85, Teacher: 'Steven Thorpe' },
  { Course: 'Micro-Economics', Term: 1, Credit: 4, Score: 62, Teacher: 'Jan Kotas' },
  { Course: 'Linear Algebra', Term: 2, Credit: 5, Score: 73, Teacher: 'Nancy Feehafer' },
  { Course: 'Accounting', Term: 2, Credit: 3.5, Score: 86, Teacher: 'Nancy Feehafer' },
  { Course: 'Statistics', Term: 2, Credit: 5, Score: 85, Teacher: 'Robert Zare' },
  { Course: 'Marketing', Term: 2, Credit: 4, Score: 70, Teacher: 'Laura Giussani' }
]
const initSpread = (spread) => {
// suspendPaint 暂停重绘
  spread.suspendPaint()

  //  let sheet = this.spread.getSheet(1);
  //               sheet.suspendPaint();
  //               sheet.name('SheetAreaOffset');
  const spreadNS = GC.Spread.Sheets
  const sheet = spread.getActiveSheet()
  sheet.name('SheetAreaOffset')
  console.log(sheet)
  // 添加数据
  const table = sheet.tables.addFromDataSource('Table1', 2, 1, source, spreadNS.Tables.TableThemes.medium7)
  // table.setColumnValue(0, 'Total')结果显示
  table.showFooter(true)
  // key值
  table.showHeader(true)
  table.highlightFirstColumn(true)
  table.highlightLastColumn(true)
  // 计算公式
  table.setColumnFormula(2, '=SUBTOTAL(109,[Credit])')
  table.setColumnFormula(3, '=SUBTOTAL(109,[Score])')
  table.setColumnValue(0, 'Total')
  // 添加sheet
  spread.addSheet(1)
  // 默认显示sheet
  // spread.setActiveSheetIndex(1)
  // spread.removeSheet(activeIndex);
  // spread.clearSheets();
  // 设置列的宽度
  sheet.setColumnWidth(0, 20)
  sheet.setColumnWidth(1, 130)
  sheet.setColumnWidth(2, 70)
  sheet.setColumnWidth(3, 70)
  sheet.setColumnWidth(4, 70)
  sheet.setColumnWidth(5, 100)
  spread.resumePaint()
}
</script>
<style lang='scss' scoped>
.sample-tutorial {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.sample-spreadsheets {
   width: calc(100% - 280px);
   height: 80vh;
   overflow: hidden;
}

body {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

</style>
